<template>

      <div id="main">
        <div @click="clickBack" class="top">
            <van-nav-bar title="内蒙古能源-综合" left-text="返回" left-arrow>
                <template #right  >
                     <!-- <van-icon name="search" size="18" /> -->
<!--                       <img class="logOutImg" src="../assets/img/index/001.png" alt="">-->
                    <span class="logOutImg" @click="onClickRight">安全退出</span>
                </template>
            </van-nav-bar>
        </div>
        <!-- :style="indexHeight" style="overflow-y: scroll" -->
        <div class="down">
            <van-tabs @click="onClick">
                <van-tab v-for="(item,index) in tabList" :key="index" :title="item.name"/>
            </van-tabs>
            <router-view></router-view>
        </div>
    </div>


</template>

<script>
export default {
    data(){
        return{
            tabList:[{
                name:'资源分布',
                router:'resourceDistribution'
            },{
                name:'项目管理',
                router:'ProjectManagement'
            },{
                name:'能源运行',
                router:'OperationEnergy'
            },{
                name:'能源结构',
                router:'energystructure'
            },{
                name:'基础设施',
                router:'Infrastructure'
            },{
                name:'现代能源经济',
                router:'EnergyEconomics'
            },{
                name:'能流图',
                router:'energystream'
            },{
                name:'指标监测',
                router:'Indicatorsmonitoring'
            }]
        }
    },
    mounted(){


    },
    // computed: {
    //     indexHeight: function () {
    //         return 'height: '+(window.screen.height - 20 - 60)+'px'
    //     }
    // },
    methods:{

        onClick(name) {

            this.$router.push({name:this.tabList[name].router})
        },
        clickBack(){
            this.$router.push('/index')
        },
        onClickRight(){
            this.$dialog.alert({
                message: '确定退出？',
                showCancelButton:true,

            }).then(()=>{
                this.$axios.get(`http://58.18.173.195:8082/mengenergy-background/LogoutController/logout`,JSON).then((data) => {
                    if (data.code == 0) {
                        localStorage.removeItem('token')
                        localStorage.removeItem('menuIds')
                        localStorage.removeItem('regionName')
                        localStorage.removeItem('time')
                        console.log('注销成功');
                        this.$router.push('/login')
                    } else if (data.code == 1) {
                        console.log('注销失败');
                    }
                })
            });
        }
            }
}
</script>

<style lang="scss" scoped>

    #main{
        font-size: 16px;
        // padding-top:20px;
        .van-tab__text{
            font-size: 14px;
            height: .8rem;
        }
    }

    /*顶部导航样式 */
    .top {
        position:fixed;
        width:100%;
        z-index: 99;
        top:0;

    }
    .down{
        margin-top:1.2rem;
    }
    .top .van-nav-bar{
        width: 100%;
        height: 1.3rem;
        border-bottom: 0.5px solid #cccccc52;
        background-color:#E5F1FF;
    }

</style>
<style>

    .top .logOutImg{
         width: 0.6rem;
         line-height: 1;
         font-size: 12px;
    }
    .top .van-nav-bar__left{
        top:0.4rem;
    }
    .top .van-nav-bar__right{
         top:0.4rem;
    }

    .top .van-nav-bar__title {
        padding-top:0.4rem;
    }

</style>

